<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>家居家纺暖秋慧</title>
    <script>
        (function () {
            var _html = document.querySelector('html');
            var _sw = window.screen.width;
            if (_sw >= 812) {
                _html.style.fontSize = 812 / 10 + 'px';
                return
            }
            _html.style.fontSize = window.screen.width / 10 + 'px';
        }())
    </script>

    <style>
        /*html,body{*/
            /*height: 100%;*/
        /*}*/
        * {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
        }
        a{
            -webkit-tap-highlight-color: transparent;
        }
        .body {
            height: 100%;
            background-color: #F9D9BB;
        }

        .body .top-banner {
            height: 7.05333rem;
            width: 10rem;
            background: url("../images/9_21/m-banner.png") no-repeat center/100% 100%;
        }

        .body .wrap {
            width: 9.46667rem;
            margin: 0 auto;
        }

        .body .container {
            width: 100%;
            position: relative;
            margin-top: 0.93333rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .body .container::after {
            content: '';
            position: absolute;
            width: 5.46667rem;
            height: 1.2rem;
            top: -1.33333rem;
            left: 50%;
            margin-left: -2.73333rem;
            background: url("../images/9_21/title-1.png") no-repeat center/100% 100%;
        }

        .body .container .card {
            width: 33%;
            height: 6.4rem;
            border-bottom: 0.08rem solid #AC6F60;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            margin-top: 0.2rem;
        }

        .body .container .card .card-img {
            width: 100%;
            height: 4.45333rem;
            background-color: deeppink;
        }

        .body .container .card .card-img img {
            height: 100%;
            width: 100%;
        }

        .body .container .card .card-btm {
            padding: 0.21333rem;
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            font-size: 0.18667rem;
        }

        .body .container .card .card-btm .card-foot {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .body .container .card .card-btm .card-foot > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .body .container .card .card-btm .card-foot > div > div > span,
        .body .container .card .card-btm .card-foot > div > div del {
            font-size: 0.16rem;
            color: #9A9A9A;
        }

        .body .container .card .card-btm .card-foot > div > div > div {
            padding-top: 0.08rem;
        }

        .body .container .card .card-btm .card-foot > div > div > div span {
            color: red;
        }

        .body .container .card .card-btm .card-foot > div > span {
            color: red;
            font-size: 0.53333rem;
            padding: 0.16rem 0 0 0.05333rem;
        }

        .body .container .card .card-btm .card-foot > a {
            display: block;
            height: 50px;
            width: 50px;
            background-color: #AC6F60;
            padding: 0.13333rem;
            color: white;
            cursor: pointer;
            text-decoration: none;
            background: url("../images/9_21/ljgm.png") no-repeat center/100% 100%;
        }

        .body .container + .container {
            margin-top: 1.73333rem;
        }

        .body .container + .container::after {
            background-image: url("../images/9_21/title-2.png");
        }

        .body .back-up {
            width: 3.33333rem;
            height: 1.2rem;
            margin: 0.4rem auto;
            background: url("../images/9_21/back-top.png") no-repeat center/100% 100%;
            cursor: pointer;
        }

        @media screen and (max-width: 810px) {
            .body .wrap .container .card .card-btm > p {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .body .container .card {
                width: 4.64rem;
            }
        }

        @media screen and (width: 812px) {
            .body .container .card {
                height: 5.33333rem;
            }

            .body .container .card .card-img {
                height: 3.46667rem;
            }

            .body .container .card .card-btm .card-foot > a {
                width: 26px;
                height: 26px;
            }

            .body .container .card .card-btm .card-foot > div > span {
                font-size: 0.4rem;
            }
        }

        /*# sourceMappingURL=m-style.css.map */

    </style>

</head>
<body>
<div class="body">
    <div class="top-banner">
    </div>
    <div class="wrap">
        <div class="container">
        </div>
        <div class="container">
        </div>
    </div>
    <div class="back-up"></div>
</div>

<script type="text/html" id="tplCtx">
    <div class="card">
        <a href="javascript:;" data-id="{{id}}" class="card-img C_J_good"><img src="{{pic}}" alt=""></a>
        <div class="card-btm">
            <p>{{name}}</p>
            <div class="card-foot">
                <div class="clearfix">
                    <div>
                        <span>原价：</span>
                        <del>{{price_on_tag}}元</del>
                        <div>购买价：<span>￥</span></div>
                    </div>
                    <span>{{discountPrice}}</span>
                </div>
                <a href="javascript:;" data-id="{{id}}" class="C_J_good">
                </a>
            </div>
        </div>
    </div>
</script>
</body>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../js/art-template.js"></script>
<script src="../../js/login.js"></script>
<script src="../../js/model.js"></script>
<script src="../../js/model-citizen.js"></script>
<script>

    (function ($,template) {
        var infoId = [
            [107439,140236,143171,113765,140439,141272,116133,132378,143175,123841,141054,122187,122186,112561,134327,134326,127695,72727,141034,140123,141544,141508,107017,122184],
            [140985,140943,140953,119702,106843,133886,137690,138040,106870]
        ];

        function jsonp(id,callback) {
            var url = 'http://www.cjwsc.com/qcwdProduct/getProductByIds';
            $.ajax({
                url:url,
                dataType:'jsonp',
                jsonp:'jsonpcallback',
                data:{
                    ids:id,
                    business_type:10,
                    client_type:1
                },
                success:function (res) {
                    if(res.err){
                        console.log(res.err);
                        return
                    }
                    res.msg[0].pic = res.msg[0].pic.replace('240_240','800_800')
                    callback(res.msg[0])
                }
            })
        };

        function getData(infoId) {
            infoId.forEach(function (v,i) {
                v.forEach(function (t) {
                    jsonp(t,function (res) {
                        $('.container').eq(i).append(template('tplCtx',res))
                    })
                })
            })
        }
        getData(infoId);

        $('.back-up').on('click',function () {
            $('html,body').animate({
                scrollTop:0
            },500)
        })
    }($,template))
</script>
</html>